
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>HTML <span class="color_h1">简介</span></h1>
<div class="example">
<h2 class="example">HTML 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-brackets">&lt;</span><span class="hl-code">!</span><span class="hl-var">DOCTYPE</span><span class="hl-code"> </span><span class="hl-var">html</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">html</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">head</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">meta</span><span class="hl-code"> </span><span class="hl-var">charset</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">utf-8</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">title</span><span class="hl-brackets">&gt;</span><span class="hl-code">菜鸟教程(runoob.com)</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">title</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">head</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">body</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">h1</span><span class="hl-brackets">&gt;</span><span class="hl-code">我的第一个标题</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">h1</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">p</span><span class="hl-brackets">&gt;</span><span class="hl-code">我的第一个段落。</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">p</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">body</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">html</span><span class="hl-brackets">&gt;</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<h2>实例解析</h2>
<p><img decoding="async" src="https://www.runoob.com/wp-content/uploads/2013/06/02A7DD95-22B4-4FB9-B994-DDB5393F7F03.jpg"/></p>
<ul>
<li><strong>&lt;!DOCTYPE html&gt;</strong> 声明为 HTML5 文档</li>
<li><strong>&lt;html&gt;</strong> 元素是 HTML 页面的根元素</li>
<li><strong>&lt;head&gt;</strong> 元素包含了文档的元（meta）数据，如 <span class="marked">&lt;meta charset="utf-8"&gt;</span> 定义网页编码格式为 <strong>utf-8</strong>。</li>
<li><strong>&lt;title&gt;</strong> 元素描述了文档的标题</li>
<li><strong>&lt;body&gt;</strong> 元素包含了可见的页面内容</li>
<li><strong>&lt;h1&gt;</strong> 元素定义一个大标题</li>
<li><strong>&lt;p&gt;</strong> 元素定义一个段落</li>
</ul>
<p><strong>注：</strong>在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。</p>
<br/>
<hr/><h2>什么是HTML?</h2>
<p>HTML 是用来描述网页的一种语言。</p><ul>
<li>HTML 指的是超文本标记语言: <b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage</li>
<li>HTML 不是一种编程语言，而是一种<b>标记</b>语言</li>
<li>标记语言是一套<b>标记标签</b> (markup tag)</li>
<li>HTML 使用标记标签来<b>描述</b>网页</li>
<li>HTML 文档包含了HTML<b> 标签</b>及<b>文本</b>内容</li>
<li>HTML文档也叫做<b> web 页面</b></li>
</ul>
<hr/><h2>HTML 标签</h2><p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p>
<ul>
<li>HTML 标签是由<em>尖括号</em>包围的关键词，比如 &lt;html&gt;</li>
<li>HTML 标签通常是<em>成对出现</em>的，比如 &lt;b&gt; 和 &lt;/b&gt;</li>
<li>标签对中的第一个标签是<em>开始标签</em>，第二个标签是<em>结束标签</em></li>
<li>开始和结束标签也被称为<em>开放标签</em>和<em>闭合标签</em></li>
</ul>
<div style="width:610px;border:1px solid lightgray;font-size:20px;padding:10px">
<span style="color:#98bf21">&lt;标签&gt;</span>内容<span style="color:#98bf21">&lt;/标签&gt;</span></div>
<br/>
<hr/><h2>HTML 元素</h2>
<p>"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.</p>
<p>但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例: </p>
<p>HTML 元素:</p>
<div style="width:610px;border:1px solid lightgray;font-size:20px;padding:10px;">
<span style="color:#98bf21">&lt;p&gt;</span>这是一个段落。<span style="color:#98bf21">&lt;/p&gt;</span></div>
<br/>
<hr/><h2>Web 浏览器</h2>
<p>Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。</p>
<p>浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：</p>
<p>
<img decoding="async" src="https://www.runoob.com/wp-content/uploads/2013/06/html-first.png"/>
</p>
<hr/><h2>HTML 网页结构</h2>
<p>下面是一个可视化的HTML页面结构：</p>
<div style="width:99%;border:1px solid grey;padding:3px;margin:0;background-color:#ddd">&lt;html&gt;
<div style="width:90%;border:1px solid grey;padding:3px;margin:20px">&lt;head&gt;
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;title&gt;页面标题&lt;/title&gt;
</div>
&lt;/head&gt;
</div>
<div style="width:90%;border:1px solid grey;padding:3px;margin:20px;background-color:#fff">&lt;body&gt;
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;h1&gt;这是一个标题&lt;/h1&gt;</div>
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;p&gt;这是一个段落。&lt;/p&gt;</div>
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;p&gt;这是另外一个段落。&lt;/p&gt;</div>
&lt;/body&gt;
</div>
&lt;/html&gt;
</div><br/>
<table class="lamp"><tbody><tr>
<th style="width:34px">
<img alt="Note" decoding="async" src="/images/lamp.jpg" style="height:32px;width:32px"/></th>
<td>只有 &lt;body&gt; 区域 (白色部分) 才会在浏览器中显示。</td>
</tr></tbody></table>
<br/>
<hr/><h2>HTML版本</h2>
<p>从初期的网络诞生后，已经出现了许多HTML版本:</p>
<table class="reference notranslate">
<tbody><tr>
<th>版本</th>
<th>发布时间</th>
</tr>
<tr>
<td>HTML</td>
<td>1991</td>
</tr>
<tr>
<td>HTML+</td>
<td>1993</td>
</tr>
<tr>
<td>HTML 2.0</td>
<td>1995</td>
</tr>
<tr>
<td>HTML 3.2</td>
<td>1997</td>
</tr>
<tr>
<td>HTML 4.01</td>
<td>1999</td>
</tr>
<tr>
<td>XHTML 1.0</td>
<td>2000</td>
</tr>
<tr>
<td>HTML5</td>
<td>2012</td>
</tr>
<tr>
<td>XHTML5</td>
<td>2013</td>
</tr>
</tbody></table>
<br/>
<hr/><h2> &lt;!DOCTYPE&gt; 声明</h2>
<p>&lt;!DOCTYPE&gt;声明有助于浏览器中正确显示网页。</p>
<p>网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。</p>
<p>doctype 声明是不区分大小写的，以下方式均可：
</p>
<div class="code notranslate">
<div>
&lt;!DOCTYPE html&gt;
<br/><br/>
&lt;!DOCTYPE HTML&gt;
<br/><br/>
&lt;!doctype html&gt;
<br/><br/>
&lt;!Doctype Html&gt;
</div></div>
<hr/><h2>通用声明</h2>
<h3>HTML5</h3>
<div class="code">
<div>
&lt;!DOCTYPE html&gt;
</div></div>
<h3>HTML 4.01</h3>
<div class="code notranslate">
<div>
&lt;!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"<br/>
"http://www.w3.org/TR/html4/loose.dtd"&gt;
</div></div>
<h3>XHTML 1.0</h3>
<div class="code notranslate">
<div>
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br/>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
</div></div>
<p>查看完整网页声明类型
<a >DOCTYPE 参考手册</a>。</p>
<hr/>
<h2>中文编码</h2>
<p>目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。</p>
<div class="example">
<h2 class="example">HTML 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-brackets">&lt;</span><span class="hl-code">!</span><span class="hl-var">DOCTYPE</span><span class="hl-code"> </span><span class="hl-var">html</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">html</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">head</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">meta</span><span class="hl-code"> </span><span class="hl-var">charset</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">UTF-8</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">title</span><span class="hl-brackets">&gt;</span><span class="hl-code">
页面标题</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">title</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">head</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">body</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">h1</span><span class="hl-brackets">&gt;</span><span class="hl-code">我的第一个标题</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">h1</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">p</span><span class="hl-brackets">&gt;</span><span class="hl-code">我的第一个段落。</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">p</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">body</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">html</span><span class="hl-brackets">&gt;</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    